<template>
	<view>
		<view class="box d-b-c">
			<view class="box1">
				<u-dropdown ref="uDropdown">
					<u-dropdown-item :title="unitName">
						<view class="slot-content">
							<scroll-view scroll-y style="width:100%;height:100%;">
								<view :class="['dropdown-item', {'active':unitId==item.unit_id}]"
									v-for="(item, index) in bookUnitList" :key="index" @click="dropdownClick(item)">
									<text>{{item.unit_name}}</text>
									<u-icon name="checkbox-mark" color="#4BB0FF" size="30"
										v-if="unitId==item.unit_id"></u-icon>
								</view>
							</scroll-view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="box2 ">
				<u-dropdown ref="uDropdown">
					<u-dropdown-item :title="info.label">
						<view class="sort-content">
							<scroll-view scroll-y style="width:100%;height:100%;">
								<view :class="['dropdown-item', {'active':activeId==item.value}]"
									v-for="(item, index) in sort" :key="item.value" @click="changeSort(item)">
									<text>{{item.label}}</text>
									<u-icon name="checkbox-mark" color="#4BB0FF" size="30"
										v-if="activeId==item.value"></u-icon>
								</view>
							</scroll-view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitName:'请选择单元',
				value: '',
				unitId:'',
				inputWidth: 120,
				bookUnitList: [],
				sort:[
					{label:'高频',value:1},
					{label:'默认',value:2},
				],
				activeId:1,
				info:{}
			};
		},
		onLoad() {
			this.info = this.sort[0]
		},
		mounted() {
			
		},
		methods: {
			changeSort(item){
				this.info = item
				this.activeId = item.value
			},
			dropdownClick(item){
				this.unitId = item.unit_id
			},
			
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #EEFAFF;
		padding: 0 30rpx 0;
		position: relative;
		height: calc(100vh - 88rpx);
		box-sizing: border-box;
		overflow-y: auto;
	}
	.box1{
		// width: 500rpx;
	}
	.box2{
		width:200rpx;
	}

	.slot-content {
		background-color: #FFFFFF;
		width: 500rpx;
		.dropdown-item {
			width: 100%;
			height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #e4e7ed;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&:hover {
				background: rgba(75, 176, 255, .5);
				cursor: pointer;
			}

			&.active {
				color: #4BB0FF !important;
			}
		}
	}
	
	.sort-content{
		background-color: #FFFFFF;
		// width: 400rpx;
		.dropdown-item {
			width: 100%;
			height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #e4e7ed;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		
			&:hover {
				background: rgba(75, 176, 255, .5);
				cursor: pointer;
			}
		
			&.active {
				color: #4BB0FF !important;
			}
		}
	}
</style>